<template>
    <div class="recruit-page">
        <div class="top">
            <router-link class="left-back" to="/recruit"></router-link>
            <!-- <router-link class="my-publish" to="/myRecruit">我的发布</router-link>  -->
        </div>
        <div class="recruit-page-conbox">
            <div class="filter">
                <div class="search-bx">
                    <form @submit.prevent="() => {
                            return false
                        }
                        ">
                        <input type="text" @keypress.enter="handleSearch" v-model="params.title" placeholder="搜索职位" />
                        <a class="cancel-search" v-if="params.title" @click="params.title=''"></a>
                    </form>
                </div>
                <div class="other">
                    <el-cascader v-model="selectedOptionsFilter" clearable style="width:160px;" placeholder="工作地点"
                        class="pro-work-elcascader" :options="options" @change="handleChangeFilter"
                        popper-class="pro-wlrk-elcascader-proper"></el-cascader>
                    <DropDown :list="jobNatureList" :value.sync="params.jobNature" :width="160" placeholder="工作性质"
                        style="margin-left:20px;" />
                    <DropDown :list="jobSalaryList" :value.sync="params.salary" :width="160" placeholder="月薪范围"
                        style="margin-left:20px;" />
                </div>
            </div>
            <div class="job-tit">
                我发布的职位
            </div>
            <div class="layout-box">
                <div class="left">
                    <a class="job-item" v-for="(job, i) in list" :key="i" @click="handleShowInfo(job)">
                        <div class="job-l">
                            <span class="j-img-box">
                                <img loading="lazy"
                                    v-aimgd="{ avatar: job.member.avatar, id: job.member.id, w: 60, name: job.member.userName }" />
                            </span>
                            <div class="basic">
                                <div class="pos-name">{{ job.title }}</div>
                                <div class="cpy-name">{{ job.companyName }}</div>
                            </div>
                        </div>
                        <div class="job-r">
                            <div class="jo-pro-item">
                                <span class="addr">工作地点</span>
                                <span class="pro-value">{{ job.province }}</span>
                            </div>
                            <!-- <div class="jo-pro-item">
                                <span class="addr">工作年限</span>
                                <span class="pro-value">不限</span>
                            </div> -->
                            <div class="jo-pro-item">
                                <span class="nature">工作性质</span>
                                <span class="pro-value">{{ job.jobNature }}</span>
                            </div>
                            <div class="jo-pro-item">
                                <span class="sarlary">预算</span>
                                <span class="pro-value budget">{{ job.salary }}</span>
                            </div>
                        </div>
                        <el-popover placement="bottom" popper-class="job-custom-face-pop" trigger="hover">
                            <div class="job-menu-items">
                                <a @click="form=Object.assign({},job);showPublish=true;"><i class="el-icon-edit-outline"></i>编辑</a>
                                <a @click="form=Object.assign({},job);showDelConfirm=true;"><i class="el-icon-delete"></i>删除</a>
                            </div>
                            <a slot="reference" class="op-fun"><i class="el-icon-more"></i></a>
                        </el-popover>
                    </a>
                    <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
                    <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
                </div>
                <div class="right">
                    <div class="publish-box">
                        <div class="text">发布我的职位</div>
                        <a class="btn" @click="resetForm();showPublish = true">发布特色职位</a>
                    </div>
                    <!-- <div class="publish-box">
                        <div class="text">特色企业</div>
                        <div class="ts-companys">
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- <div class="modal-mask publish-job-win-mask" v-if="showPublish"  @click="showPublish=false">

        </div> -->

        <a-modal v-model="showPublish" destroyOnClose centered :footer="null" :closable="false" width='773px'>
            <form class="publish-job-win" @submit.prevent="() => { return false; }">
                <a class="close-modal" @click="showPublish = false"></a>
                <div class="job-form-box">
                    <div class="tit">职位{{form.id?'编辑':'发布'}}<span class="sub-tit">以下发布内容，没有标“非必填”的项，均为必填项</span>
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.title" placeholder="职位名称（如：游戏UI设计师、游戏ICON设计师、资深游戏UI设计师）">
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyName" placeholder="公司名称">
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyUrl" placeholder="公司官网（非必填）">
                    </div>
                    <div class="form-field-item flex-between-item recruit-cur-bg">
                        <!-- <DropDown placeholder="工作城市" style="width:100%;"/> -->
                        <!-- <el-cascader 
                            v-model="options"
                            clearable
                            placeholder="工作城市" class="pro-work-elcascader mr20"
                            :options="options"
                            @change="handleChange" popper-class="pro-wlrk-elcascader-proper"
                            ></el-cascader> -->

                        <el-cascader style="width: 100%;" size="large" class="pro-work-elcascader" :options="options"
                            popper-class="pro-wlrk-elcascader-proper" v-model="selectedOptions" @change="handleChange"
                            placeholder="工作城市">
                        </el-cascader>
                        <DropDown :list="jobNatureList" :value.sync="form.jobNature" placeholder="工作性质"
                            style="margin-left:20px;width:100%;" />
                    </div>
                    <div class="form-field-item flex-between-item recruit-cur-bg">
                        <DropDown :list="jobCompanyNature" :value.sync="form.jobType" placeholder="行业类型"
                            style="width:100%;" />
                        <DropDown :list="jobSalaryList" :value.sync="form.salary" placeholder="月薪范围"
                            style="margin-left:20px;width:100%;" :maxh="300" />
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyEmail" placeholder="简历发送至（如：hr@gameui.net）">
                    </div>
                    <div class="form-field-item">
                        <!-- <textarea v-model="form.jobDescription" placeholder="职位描述"></textarea> -->
                        <quillEditor v-model="form.jobDescription" :options="quillEditorOption1"></quillEditor>
                    </div>
                    <div class="form-field-item">
                        <!-- <textarea v-model="form.skillDescription" placeholder="职位要求"></textarea> -->
                        <quillEditor v-model="form.skillDescription" :options="quillEditorOption2"></quillEditor>
                    </div>
                </div>
                <div class="bot-right">
                    <a class="publish" @click="handlePublish">{{form.id?'修改':'发布'}}职位</a>
                </div>
            </form>
        </a-modal>

        <a-modal v-model="showInfo" destroyOnClose centered :footer="null" :closable="false" width='1195px'>
            <RecruitInfo :data="info" @close="showInfo = false" @showmeall="onShowMeAll" />
        </a-modal>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null"  :closable="false" width="366px">
            <div class="fav-component" style="width:366px;">
                <div class="fav-header">
                系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import { quillEditor } from "vue-quill-editor";
import SparkMD5 from 'spark-md5'
import { regionData, provinceAndCityData, CodeToText, TextToCode } from "element-china-area-data";
import api from '@/api/api'
import DropDown from '@/components/dropdown'
import RecruitInfo from '@/components/RecruitInfo'
export default {
    components: {
        DropDown, RecruitInfo, quillEditor, Empty
    },
    data() {
        return {
            showDelConfirm:false,
            isloading: true,
            selectedOptionsFilter: [],
            quillEditorOption1: {
                placeholder: '职位描述',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
                            ['blockquote', 'code-block'],                      //引用，代码块
                            [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
                            [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
                            [{ 'direction': 'rtl' }],                         // 文字输入方向
                            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
                            [{ 'color': [] }, { 'background': [] }],          // 颜色选择
                            [{ 'font': [] }],// 字体
                            [{ 'align': [] }], // 居中
                            ['clean'],
                            ['link', 'image', 'video']
                        ]
                    }
                }
            },
            quillEditorOption2: {
                placeholder: '职位要求',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
                            ['blockquote', 'code-block'],                      //引用，代码块
                            [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
                            [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
                            [{ 'direction': 'rtl' }],                         // 文字输入方向
                            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
                            [{ 'color': [] }, { 'background': [] }],          // 颜色选择
                            [{ 'font': [] }],// 字体
                            [{ 'align': [] }], // 居中
                            ['clean'],
                            ['link', 'image', 'video']
                        ]
                    }
                }
            },
            selectedOptions: [],
            scrollLoaded: false,
            hasMore: true,
            options: regionData,
            showInfo: false,
            showPublish: false,
            jobNatureList: [],
            jobSalaryList: [],
            jobCompanyNature: [],
            list: [],
            form: {},
            info: {
                member: {

                }
            },
            params: {
                jobNature: '',
                pageNum: 1,
                pageSize: 20,
                isAsc: 'desc',
                orderByColumn: 'createTime'
            }
        }
    },
    watch: {
        'params.jobNature': function () {
            this.params.companyName = '';
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        'params.salary': function () {
            this.params.companyName = '';
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        }
    },
    destroyed() {
        $(document).unbind('scroll')
    },
    methods: {
        async handleConfirmDel(){
            let res=await api.delJob(this.form.id);
            if(res.code==0){
                this.$amessage.success('删除成功');
                this.handleSearch();
                this.showDelConfirm=false;
            }
        },
        resetForm(){
            this.selectedOptions=[];
            this.form={
                title:'',
                companyName:'',
                companyUrl:'',
                jobNature:'',
                jobType:'',
                salary:'',
                companyEmail:'',
                jobDescription:'',
                skillDescription:''
            }
        },
        handleSearch(e) {
            if (e) e.target.blur();
            this.params.companyName = '';
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        handleChangeFilter() {
            var loc = "";
            let that = this
            if (this.selectedOptionsFilter.length > 0) {
                for (let i = 0; i < this.selectedOptionsFilter.length; i++) {
                    loc += CodeToText[this.selectedOptionsFilter[i]];
                    if (i == 0) {
                        that.params.province = CodeToText[this.selectedOptionsFilter[i]]
                    }
                    if (i == 1) {
                        that.params.city = CodeToText[this.selectedOptionsFilter[i]]
                    }
                    if (i == 2) {
                        that.params.area = CodeToText[this.selectedOptionsFilter[i]]
                    }
                }
            } else {
                that.params.province = '';
                that.params.city = '';
                that.params.area = '';
            }
            this.params.companyName = '';
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        handleChange() {
            var loc = "";
            let that = this
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += CodeToText[this.selectedOptions[i]];
                if (i == 0) {
                    that.form.province = CodeToText[this.selectedOptions[i]]
                }
                if (i == 1) {
                    that.form.city = CodeToText[this.selectedOptions[i]]
                }
                if (i == 2) {
                    that.form.area = CodeToText[this.selectedOptions[i]]
                }
            }
        },
        async handlePublish() {
            let data = Object.assign({}, this.form);
            if (!data.title) {
                this.$amessage.warn('职位名称不能为空!');
                return
            }
            if (!data.companyName) {
                this.$amessage.warn('公司名称不能为空!');
                return
            }
            if (!data.city) {
                this.$amessage.warn('请选择工作城市!');
                return
            }
            if (!data.jobNature) {
                this.$amessage.warn('请选择工作性质!');
                return
            }
            if (!data.jobType) {
                this.$amessage.warn('请选择行业类型!');
                return
            }
            if (!data.salary) {
                this.$amessage.warn('请选择月薪范围!');
                return
            }
            if (!data.companyEmail) {
                this.$amessage.warn('请填写简历发送目标邮箱!');
                return
            }
            var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if (!reg.test(data.companyEmail)) {
                this.$amessage.warn("邮箱格式不正确");
                return;
            }
            if (!data.jobDescription) {
                this.$amessage.warn('请填写职位描述!');
                return
            }
            if (!data.skillDescription) {
                this.$amessage.warn('请填写职位要求!');
                return
            }
            if(data.id){
                delete data.searchValue;
                delete data.createBy;
                delete data.updateBy;
                delete data.updateTime;
                delete data.remark;
                delete data.params;
                delete data.pageNum;
                delete data.pageSize;
                delete data.orderByColumn;
                delete data.isAsc;
                delete data.address;
                delete data.companyNature;
                delete data.companyPhone;
                delete data.member;
                let res = await api.editJob(data);
                if (res.code == 0) {
                    this.handleSearch();
                    this.$amessage.success('修改成功');
                    this.showPublish=false;
                }
            }else{
                let res = await api.addJob(data);
                if (res.code == 0) {
                    this.handleSearch();
                    this.$amessage.success('发布成功')
                    this.showPublish=false;
                }
            }
        },
        clearCurCompanyBy() {
            this.params.companyName = '';
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        onShowMeAll(_name) {
            this.showInfo = false;
            this.params.companyName = _name;
            this.params.pageNum = 1;
            this.list = [];
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        async handleShowInfo(item) {
            let res = await api.getJobById(item.id);
            this.info = res.data;
            this.showInfo = true;
        },
        onImgError(e) {
            e.target.src = require('../assets/pro/default_uimg.svg');
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handleLoadingMore() {
            this.params.pageNum++;
            this.queryList();
        },
        async queryList() {
            this.isloading = true;
            let result = await api.myJobs(this.params);
            this.isloading = false;
            this.list = [...this.list, ...result.data];
            let that = this;
            if (result.data && (result.data.length < that.params.pageSize || result.data.length == 0)) {
                that.hasMore = false;
            } else {
                that.hasMore = true;
            }
            that.scrollLoaded = true;
        }
    },
    async mounted() {
        let ckPass=this.$bhelper.checkLogin(this,true);
        if(!ckPass)return;
        this.options.forEach(f => {
            if (f.children) {
                f.children.forEach(s => {
                    if (s.label == '市辖区') {
                        f.children = s.children;
                    }
                })
            }
        })
        let res = await api.getJobAttribute({ type: 'job_nature' });
        res.data.job_nature.map(item => {
            item.value = item.title.toString();
        })
        res.data.job_salary.map(item => {
            item.value = item.title.toString();
        })
        res.data.company_nature.map(item => {
            item.value = item.title.toString();
        })
        this.jobNatureList = res.data.job_nature;
        this.jobSalaryList = res.data.job_salary;
        this.jobCompanyNature = res.data.company_nature;

        this.queryList();

        let that = this;
        $(document).on('scroll', function (e) {
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

            if (that.scrollLoaded == false) return;

            if (jHeight <= 200 && that.hasMore) {
                that.scrollLoaded = false;
                that.handleLoadingMore();
            }
        })
    }
}
</script>

<style scoped lang="less">
.recruit-page {
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-back {
            background: url('../assets/pro/back_btn_icon.svg') no-repeat;
            width: 44px;
            height: 44px;
            display: block;
            transition: .2s all linear;

            &:hover {
                background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
                background-size: cover;
            }
        }

        .my-publish {
            line-height: 40px;
            background: #1C1C1E;
            color: #fff;
            border-radius: 8px;
            text-align: center;
            width: 96px;
            font-size: 14px;
        }
    }

    .recruit-page-conbox {
        // background: #171717;
        border-radius: 16px;
        margin-top: 18px;
        padding: 40px;

        .filter {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .search-bx {
                top: 20px;
                width: 100%;
                width: 100%;
                margin-right: 20px;

                .cancel-search {
                    background: url('../assets/pro/cancel_search.svg');
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                }

                form {
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    height: 40px;
                    background-image: url('../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 13px center;

                    border-radius: 8px;
                    background-color: #242327;
                    padding-left: 33px;
                    position: relative;
                    input {
                        height: 26px;
                        background-color: #242327;
                        // color:#848393;
                        border: none;
                        padding-left: 15px;
                        color: #fff;
                        width: 100%;
                        font-size: 14px;
                    }
                }
            }

            .other {
                display: flex;
                align-items: center;

                ::v-deep {
                    .pro-work-elcascader {
                        line-height: 40px;

                        input {
                            background: #242327 !important;
                            border-radius: 8px;
                            height: 40px !important;
                            line-height: 40px !important;

                            &::-webkit-input-placeholder {
                                color: #fff !important;
                            }
                        }

                        .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down {
                            color: #b9b9b9 !important;
                        }

                        .is-focus {
                            input {
                                border: 1px solid #11CCB1 !important;
                            }
                        }
                    }
                }
            }
        }

        .job-tit {
            margin-top: 43px;
            font-size: 26px;
            font-weight: 500;

            .cur-company {
                position: relative;
                margin-right: 40px;
                font-weight: normal;
                margin-left: 20px;
                background: #23232A;
                font-size: 14px;
                line-height: 39px;
                display: inline-block;
                padding: 0px 40px 0px 15px;
                border-radius: 8px;

                .cancel-search {
                    background: url('../assets/pro/cancel_search.svg');
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 9px;
                    right: 10px;
                    cursor: pointer;
                    opacity: 0.7;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }

        .layout-box {
            margin-top: 12px;
            display: flex;

            .left {
                margin-right: 20px;
                width: calc(100% - 340px);

                .job-item {
                    display: flex;
                    margin-bottom: 20px;
                    background: #23232A;
                    border-radius: 16px;
                    padding: 25px 26px;
                    justify-content: space-between;
                    height: 110px;
                    // transition:.1s all linear;
                    border: 1px solid #23232A;
                    animation: opacity .2s linear;
                    position: relative;
                    &:hover {
                        border: 1px solid #11CCB1;
                        .pos-name{
                            color:#11CCB1;
                        }
                    }

                    .job-l {
                        display: flex;
                        align-items: center;

                        .j-img-box {
                            width: 60px;
                            height: 60px;
                            border-radius: 60px;
                            overflow: hidden;
                            margin-right: 21px;
                            background: #131313;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .basic {
                            .pos-name {
                                font-size: 16px;
                                font-weight: 500;
                                line-height: 22px;
                            }

                            .cpy-name {
                                font-size: 14px;
                                color: #969696;
                                margin-top: 14px;
                                line-height: 20px;
                            }
                        }
                    }

                    .job-r {
                        display: flex;
                        align-items: center;
                        min-width: 363px;

                        .jo-pro-item {
                            margin-right: 68px;

                            span {
                                display: block;

                                &:first-child {
                                    color: #969696;
                                    font-size: 14px;
                                }

                                &:last-child {
                                    color: #969696;
                                    font-size: 16px;
                                    margin-top: 16px;
                                    color: #fff;
                                }
                            }

                            .sarlary {
                                background: url('../assets/pro/icon_job_salary.svg') no-repeat;
                                background-position: left center;
                                padding-left: 18px;
                                background-size: 14px 14px;
                            }

                            .addr {
                                background: url('../assets/pro/icon_job_local.svg') no-repeat;
                                background-position: left center;
                                padding-left: 18px;
                                background-size: 14px 14px;
                            }

                            .nature {
                                background: url('../assets/pro/icon_job_nature.svg') no-repeat;
                                background-position: left center;
                                padding-left: 18px;
                                background-size: 14px 14px;
                            }

                            .budget {
                                color: #11CCB1 !important;
                            }
                        }
                    }
                }
            }

            .right {
                width: 340px;

                .publish-box {
                    background: #23232A;
                    border-radius: 16px;
                    padding: 30px 25px 25px 25px;
                    margin-bottom: 20px;

                    .text {
                        font-size: 20px;
                        font-weight: 500;
                        text-align: center;
                    }

                    .btn {
                        line-height: 49px;
                        border-radius: 8px;
                        background: #11CCB1;
                        color: #fff;
                        text-align: center;
                        width: 251px;
                        display: block;
                        font-size: 16px;
                        font-weight: 500;
                        margin: 27px auto 10px auto;
                        user-select: none;
                        transition: .1s all linear;

                        &:hover {
                            background: #0fab94;
                        }
                    }

                    .ts-companys {
                        margin-top: 34px;

                        .ts-company-item {
                            margin-bottom: 20px;
                            display: flex;
                            align-items: center;
                            font-size: 16px;
                            font-weight: 500;
                            background: url('../assets/pro/job_arrow.svg') no-repeat;
                            background-position: right center;

                            .c-img-box {
                                width: 50px;
                                height: 50px;
                                border-radius: 50px;
                                overflow: hidden;
                                margin-right: 18px;
                                background: #131313;
                            }
                        }
                    }
                }
            }
        }
    }
}

.publish-job-win {
    width: 773px;
    border-radius: 30px;
    background: #23232A;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
    // position:fixed;
    // left:calc((100% - 773px) / 2);
    top: 20%;
    z-index: 112;
    padding: 55px 87px 58px 86px;
    position: relative;

    .form-field-item {
        font-size: 14px;
        margin-bottom: 10px;

        input {
            background: #171719;
            height: 40px;
            border-radius: 8px;
            border: none;
            padding-left: 14px;
            width: 100%;
            color: #fff;
        }

        textarea {
            background: #171719;
            height: 80px;
            border-radius: 8px;
            padding: 10px 14px;
            border: none;
            resize: none;
            width: 100%;
            color: #fff;
        }

        ::v-deep {
            .ql-toolbar {
                display: none;
            }

            .ql-container {
                border: none !important;
            }

            .ql-editor {
                border-radius: 4px !important;
                border: 1px solid #171719 !important;
                border-top: 1px solid #171719 !important;
                height: 120px;
                background: #171719;
            }

            .ql-editor:focus {
                // border:1px solid red !important;
            }

            .ql-snow .ql-blank:-webkit-input-placeholder {
                font-style: normal !important;
            }
        }

        ::v-deep {
            .pro-work-elcascader {
                line-height: 40px;

                input {
                    background: #171719;
                    border-radius: 8px;
                    height: 40px !important;
                    line-height: 40px !important;

                    &::-webkit-input-placeholder {
                        color: #fff !important;
                    }
                }

                .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down {
                    color: #b9b9b9 !important;
                }

                .is-focus {
                    input {
                        border: 1px solid #11CCB1 !important;
                    }
                }
            }
        }
    }

    .flex-between-item {
        display: flex;
        align-items: center;
    }

    .tit {
        font-size: 33px;
        font-weight: 500;
        margin-bottom: 24px;
        color: #fff;

        .sub-tit {
            font-size: 12px;
            color: #6A6A80;
            margin-left: 24px;
        }
    }

    .bot-right {
        text-align: right
    }

    .publish {
        line-height: 51px;
        background: #11CCB1;
        text-align: center;
        border-radius: 8px;
        width: 259px;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        margin-top: 13px;
        user-select: none;
        transition: .1s all linear;

        // float:right;
        &:hover {
            background: #0fab94;
        }
    }

    .close-modal {
        width: 20px;
        height: 20px;
        background: url('../assets/pro/close_modal_page.svg') no-repeat;
        background-size: cover;
        position: absolute;
        top: 35px;
        z-index: 102;
        right: 29px;
        transition: .1s all linear;

        &:hover {
            opacity: .8;
            transform: rotate(90deg);
        }
    }
}
</style>